<template>
    <div>
        <a-card title="数据筛选">
            <div class="cont">
                <div>
                <span>选择水厂:</span>
                <a-select :style="{width:'200px'}" placeholder="全部" v-model:modelValue="info.works">
                    <a-option v-for="(i,index) in ener.energyData">
                    {{ i.works }}
                    </a-option>
                </a-select>
            </div>
            <div>
                <span>设备类型:</span>
                <a-select :style="{width:'200px'}" placeholder="全部" v-model:modelValue="info.type">
                    <a-option v-for="(i,index) in ener.energyData">
                        {{ i.type }}
                    </a-option>
                </a-select>
            </div>
            <a-range-picker
                
                @change="onChange"
                @select="onSelect"
                style="width: 254px; marginBottom: 20px;"
            />
            <a-space>
                <a-button type="primary" @click="search">查询</a-button>
                <a-button type="dashed" @click="reset">重置</a-button>
            </a-space>
            
            </div>
        </a-card>
    </div>
</template>

<script setup lang="ts">
    import {enGet,enerGet} from "../../api/energy/energy";
    import {useEnergy} from "../../store/energy";
    import { reactive } from "vue";
    let ener=useEnergy()
    let info=reactive({works:"",type:"",date:''});
    function onSelect(dateString:any, date:any) {
        console.log('onSelect', dateString, date);
      };
    function onChange(dateString:any, date:any) {
        console.log('onChange: ', dateString, date);
      }
      function search(){
            let {works,type}=info;
                enGet(works,type).then((res) => {
                let { results}=res.data
                // if()
            
            ener.energyData = results
    })
}   function reset(){
    enerGet().then((res) => {
    let {results}=res.data
    ener.energyData = results;
})
}
    </script>

<style scoped>
    .cont{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>